<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>

    <button class="btn btn-primary">通用按钮</button>
    <button class="btn btn-danger">警告按钮</button>

    <hr>

    <div class="row">
      <div class="col-md-8 myborder">8</div>
      <div class="col-md-4 myborder">4</div>
    </div>
    <hr>
    <div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
           style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
      </div>
    </div>
    <br>
    <div class="progress">
      <div class="progress-bar progress-bar-info" role="progressbar"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
           style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
      </div>
    </div>
    <br>
    <div class="progress">
      <div class="progress-bar progress-bar-warning" role="progressbar"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
           style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
      </div>
    </div>
    <br>
    <div class="progress">
      <div class="progress-bar progress-bar-danger" role="progressbar"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
           style="width: 10%;">
        <span class="sr-only">10% 完成（危险）</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1 {
  font-weight: normal;
}

  .myborder{
    border: 1px solid #00aa88;
  }

</style>
